HOME/Articles/

2017-5-17 建站日志

Author
Chihwei-Hsu
Published
2017/05/17
Updated
2020/04/11
HexoBlog
Article Outline

{% note success %} 未完待续... {% endnote %}

<!-- more -->

2017-05-19：

添加新 Page

1.用如下命令添加新page:

hexo new page "categories"
hexo new page "tags"
hexo new page "Python"
hexo new page "Linux"
hexo new page "Notes"
hexo new page "Something"
hexo new page "Links"
hexo new page "About"

2.打开主题配置文件``\themes\next\_config.yml文件，在menu中添加：

menu:
  home: /
  archives: /archives
  categories: /categories
  tags: /tags
  Python: /Python
  Linux: /Linux
  Notes: /Notes
  Something: /Something
  Links: /Links
  About: /About

3.打开\themes\next\languages\zh-Hans.yml，修改menu：

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  python: Python
  linux: Linux
  notes: 笔记
  something: 有料
  links: 链接
  about: 关于

*注意这里第一列必须全为小写。

*这是简体中文的配置文件，如果你的博客用的是其他语言，请打开对应的文件。

修改blog页面配色

添加自定义颜色

打开\themes\next\source\css\ _variables\base.styl文件，修改：

// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke   = #f5f5f5
$gainsboro    = #eee
$gray-lighter = #ddd
$grey-light   = #ccc
$grey         = #bbb
$grey-dark    = #999
$grey-dim     = #666
$black-light  = #555
$black-dim    = #333
$black-deep   = #222
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
$blue-deep    = #262a30
$orange       = #fc6423
// 下面是我自定义的颜色
$my-link-blue = #0593d3  //链接颜色
$my-link-hover-blue = #0477ab  //鼠标悬停后颜色
$my-code-foreground = #dd0055  // 用``围出的代码块字体颜色
$my-code-background = #eee  // 用``围出的代码块背景颜色

修改超链接颜色

还是base.styl文件，修改这几行：

// Global link color.
$link-color                   = $my-link-blue
$link-hover-color             = $my-link-hover-blue
$link-decoration-color        = $gray-lighter
$link-decoration-hover-color  = $my-link-hover-blue

预览： null

修改小型代码块颜色

依旧是base.styl文件，修改$code-background和$code-foreground的值：

// Code & Code Blocks
// 用``围出的代码块
// --------------------------------------------------
$code-font-family               = $font-family-monospace
$code-font-size                 = 15px
$code-background                = $my-code-background
$code-foreground                = $my-code-foreground
$code-border-radius             = 4px

预览： null

修改blog页面字体大小

打开\themes\next\source\css\ _variables\base.styl文件，找到：

// Font size
$font-size-base           = 14px

改为：

$font-size-base           = 16px

修改blog页面宽度

现在一般都用宽屏显示器，博客页面两侧留白太多，调整一下宽度。

1.打开\themes\next\source\css\_common\components\post\post-expand.styl，找到:

@media (max-width: 767px)

改为

@media (max-width: 1080px)

2.打开\themes\next\source\css\ _variables\base.styl文件，找到：

$main-desktop                   = 960px
$main-desktop-large             = 1200px
$content-desktop                = 700px

改为：

$main-desktop                   = 1080px
$main-desktop-large             = 1200px
$content-desktop                = 810px

修改博客部署的message

在\node_modules\hexo-deployer-git\lib\deployer.js文件末尾找到：

Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}

改得个性化一点：

好家伙又改版了悟の迹: {{ now('YYYY-MM-DD HH:mm:ss') }}

Github项目主页添加README

问题原因：

Github上博客的仓库主页没有README，如果把README.md放入source文件夹，hexo g生成时会被解析成html文件，而放到public文件夹中，生成时又会自动删除。

解决方法:

在source目录下新建文件README.mdown，在里面写README即可。hexo g会把它复制到public文件夹，且不会被解析成html

Github项目主页添加LICENSE

修改主题配置文件，找到：

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa
#creative_commons:

将其中第 4 行的注释放开，然后选择你想使用的 LICENSE 即可，可选项参照第 3 行。

SEO优化

为优化SEO，更改首页标题格式为「关键词-网站名称 - 网站描述」

打开\themes\next\layout\index.swig文件，找到这行代码：

{% block title %} {{ config.title }} {% endblock %}

把它改成：

{% block title %}
  {{ theme.keywords }} - {{ config.title }} - {{ theme.description }}
{% endblock %}

添加“Fork me on Github” ribbon

1.点击Fork me on Github；

2.给blog主页选择一个绶带（ribbon），并复制相应代码；

3.找到正在使用的theme下的layout文件，将代码插入即可；

4.比如我选择了红色的ribbon，使用的themes为next，那么只要打开 blog\themes\next\layout\_layout.swig文件，复制下面这段代码，放在最后，标签</body>之前即可。（注意将https://github.com/you改为你自己的github链接）

<a href="https://github.com/you">
    <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
    alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png">
</a>

添加404公益页面

在blog/source下新建自己的404.html文件即可，强推腾讯公益404，代码可参考如下：

---
layout: default
---
<html>
    <head>
         <meta charset="UTF-8" />
         <title>404</title>
    </head>
    <body>
         <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="http://chihweihsu.com/" homePageName="回到悟の迹"></script>
    </body>
</html>

文章阅读次数统计

1.注册LeanCloud帐号并验证邮箱；

2.创建应用，新建一个应用来专门进行博客的访问统计的数据操作；

3.创建完成之后我们点击新创建的应用的名字来进行该应用的参数配置；

4.新建一个Class用来专门保存我们博客的文章访问量等数据；

5.新建Class名字必须为Counter，设置默认的ACL权限，建议在此处选择无限制；

6.选择左侧的应用Key选项，拿到我们创建应用的AppID以及AppKey；

7.编辑 主题配置文件，如下:

leancloud_visitors:
  enable: true
  app_id: joaeuuc4hsqudUUwx4gIvGF6-gzGzoHsz
  app_key: E9UJsJpw1omCHuS22PdSpKoh

8.ok，部署后可见。

2017-05-18：

配置导航栏网站小图标

挑选一张图片，名字改为favicon.ico，放到..\blog\source下，配置主题配置文件如下：

favicon: /favicon.ico

集成百度分享模块

首先，编辑 站点配置文件，末尾添加字段:

baidushare: true #百度分享功能

其次，编辑主题配置文件，找到如下代码位置，去掉最后两行#注释，并选择展示方式，建议slide悬浮状态：

# Baidu Share
# Available value:
#    button | slide
# Warning: Baidu Share does not support https.
baidushare:
 type: slide #百度分享展示的方式button|slide

*注意：百度分享不支持https方式，可以自己买个域名绑定，或者搜下百度分享不支持https的解决方案，有前辈做出解答。

其实，现在已经完成了；但是，为了折腾，我们接着来自定义百度分享的显示，点击代码获取，一步步进行定制，走完流程，点击直接获取代码，拿到一段js代码，类似如下：

<script>
    window._bd_share_config = {
        "common": {
            "bdSnsKey": {},
            "bdText": "",
            "bdMini": "2",
            "bdMiniList": [
                "mshare",
                "bdysc",
                "evernotecn",
                "tqq",
                "weixin",
                "sqq",
                "qzone",
                "douban",
                "tsina",
                "tieba",
                "youdao",
                "isohu",
                "mail",
                "ty",
                "fbook",
                "twi",
                "linkedin",
                "copy",
                "print"
            ],
            "bdPic": "",
            "bdStyle": "0",
            "bdSize": "16"
        },
        "slide": {
            "type": "slide",
            "bdImg": "5",
            "bdPos": "right",
            "bdTop": "53.5"
        },
        "image": {
            "viewList": [
                "weixin",
                "qzone",
                "tsina",
                "evernotecn",
                "douban",
                "bdysc"
            ],
            "viewText": "分享到：",
            "viewSize": "16"
        },
        "selectShare": {
            "bdContainerClass": null,
            "bdSelectMiniList": [
                "weixin",
                "qzone",
                "tsina",
                "evernotecn",
                "douban",
                "bdysc"
            ]
        }
    };
</script>

最后，打开如下文件blog\themes\next\layout\_partials\share\baidushare.swing，替换掉里面的js代码，本文以slide模式为例，替换掉

{% elseif theme.baidushare.type === "slide" %}

后面的<script>...</script>即可。

2017-05-17：

markdown写文章时，添加居中引用模块

只需在写文章时，添加如下标签即可：

<blockquote class="blockquote-center">
    优秀的人，不是不合群，而是他们合群的人里面没有你
</blockquote>

预览：

<blockquote class="blockquote-center">优秀的人，不是不合群，而是他们合群的人里面没有你</blockquote>

2017-05-16：

首页文章预览添加图片

打开scaffolds/post.md文件，在默认参数中添加如下参数：

# 首页文章预览添加图片：
photos:
    - http://xxx.com/photo1.jpg
    - http://xxx.com/photo2.jpg

预览： null

首页文章摘要模式

首页开启文章摘要模式，不全文显示，而是出现阅读全文>，只需在主题配置文件中找到auto_excerpt属性进行配置

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true #改写为true
  length: 150 #默认展示的高度

或者，在Markdown文章中不想显示的位置，添加如下代码：

这里显示
<!--more-->
这里不显示

预览： null

BACK TO TOP
© Chihwei-Hsu 2019
Powered by GitPress.io
Sponsored by Quail.ink